/**
 * 受控组件 管理表单元素的值
 * 受控: 状态
 * 操作流程
    * 1. 声明状态
    * 2. 为 input 元素设置 value 属性, 值为状态值 并且要设置 onChange 事件
    * 3. 在事件回调中, 通过 setState 更新状态
 */
import React, { Component } from "react";

export default class ControlForm extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: ''
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form action="">
          {/* 2. 为 input 元素设置 value 属性, 值为状态值 并且要设置 onChange 事件 */}
          用户名: <input type="text" value={this.state.user} onChange={this.saveUser} />
          <br />
          密码: <input type="password" value={this.state.pass} onChange={this.savePass} />
          <br />
          <hr />
          <button onClick={this.login}>登录</button>
          <button onClick={this.reset}>清空</button>
        </form>
      </div>
    );
  }

  //登录的事件回调
  login = (e) => {
    e.preventDefault()
    console.log(`用户名为: ${this.state.user} 密码为: ${this.state.pass}`)
  };

  //表单重置
  reset = (e) => {
    e.preventDefault()
    this.setState({
      user: '',
      pass: ''
    })
  }

  //username onChange 的事件回调
  saveUser = (e) => {
    console.log(e.target.value);
    //3. 在事件回调中, 更新状态
    this.setState({
      user: e.target.value
    })
  }

  savePass = e => {
    this.setState({
      pass: e.target.value
    })
  }
}
